Popovers - Lightning Design System

A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element.

BaseDesktop Only

Preview

About Base

A dialog popover, .slds-popover, can be applied to all variants of a dialog popover. It initiates the styles of the popover and enables .slds-nubbin to be applied.

A dialog popover requires at least one focusable element.

About Popovers

A popover is used to display contextual information to the user.

A popover can accept the following nubbin position classes, .slds-nubbin_left, .slds-nubbin_left-top, .slds-nubbin_left-bottom, .slds-nubbin_top-left, .slds-nubbin_top-right, .slds-nubbin_right-top, .slds-nubbin_right-bottom, .slds-nubbin_bottom-left, .slds-nubbin_bottom-right.

Accessibility

Notable features

Popovers must come with a triggering button
They must have at least one focusable element inside
They should be implemented as a keyboard focus trap
When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there
Pressing the Escape the key as well as clicking the close button should close the Popover
User focus should be placed back on the triggering button when the popover is closed

Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present in addition and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You should not move a user's focus without their expressed intent.

Notable attributes

The Popover element should have role="dialog" applied
The dialog should be labelled, this can be achieved in two ways:
- Apply the aria-labelledby attribute to the dialog element and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the dialog)
- If no Heading element is present, use the aria-label attribute and set the value to be a meaningful title of the dialog
The dialog should be described where possible. This can be achieved by applying the aria-describedby attribute to the dialog element and set the value to be the id of the Popover body

Overview of CSS Classes

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-popover`
Summary	A dialog popover, `.slds-popover`, can be applied to all variants of a dialog popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied. A dialog popover requires at least one focusable element.
Restrict	`[role="dialog"], [role="tooltip"]`
Variant	True

Selector	`.slds-popover_edit`
Summary	Dialog specific for inline-edit popover
Restrict	`.slds-popover`

Selector	`.slds-form-element__label_edit`
Summary
Restrict	`.slds-popover_edit label`

Selector	`.slds-popover__body`
Summary	Applies syles for primary content area of popover
Restrict	`.slds-popover div`

Selector	`.slds-popover__header`
Summary	Applies styles for top area of popover
Restrict	`.slds-popover header, .slds-popover div`

Selector	`.slds-popover__footer`
Summary	Applies styles for footer area of popover
Restrict	`.slds-popover footer`

Selector	`.slds-popover__close`
Summary	Close button within a popover
Restrict	`.slds-popover button`

Selector	`.slds-popover_small`
Summary	Width modifier for popover - small
Restrict	`.slds-popover`
Modifier	True

Selector	`.slds-popover_medium`
Summary	Width modifier for popover - medium
Restrict	`.slds-popover`
Modifier	True

Selector	`.slds-popover_large`
Summary	Width modifier for popover - large
Restrict	`.slds-popover`
Modifier	True

Selector	`.slds-popover_error`
Summary	Initializes an error non-modal dialog
Restrict	`.slds-popover`
Variant	True

Selector	`.slds-popover__body_scrollable`
Summary	Applies scrollable styles for popovers
Restrict	`.slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body`

Selector	`.slds-popover_feature`
Summary	Initializes a feature non-modal dialog
Restrict	`.slds-popover`
Variant	True

Selector	`.slds-nubbin_top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-left-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-left-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-right-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-right-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-top-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-top-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-bottom-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-bottom-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-popover_panel`
Summary
Restrict	`.slds-popover`
Variant	True

Selector	`.slds-popover_walkthrough`
Summary	Initializes a walkthrough non-modal dialog
Restrict	`.slds-popover`
Variant	True

Selector	`.slds-popover_walkthrough-alt`
Summary	Alternate background for walkthrough non-modal dialog
Restrict	`.slds-popover_walkthrough`
Modifier	True

Selector	`.slds-popover_warning`
Summary	Initializes an warning non-modal dialog
Restrict	`.slds-popover`
Variant	True

Selector	`.slds-popover__body_scrollable`
Summary	Applies scrollable styles for popovers
Restrict	`.slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body`

Variants

Examples

Modifiers

Density